<?php
/* @var $this DashboardController */

$this->breadcrumbs=array(
	'Dashboard',
);
//$this->menu=array(
//	array('label'=>'Create GraphConfiguration', 'url'=>array('create')),
//	//array('label'=>'View GraphConfiguration', 'url'=>array('view', 'id'=>$model->id)),
//	array('label'=>'Manage GraphConfiguration', 'url'=>array('admin')),
//);
?>
<h1><?php echo "Show Graphs by tag and name"; ?></h1>
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<p>
	Select a tag and graphic you want to show
</p>
<script>
// creamos un evento onchange para cuando el usuario cambie su seleccion
	// importante:  #tagName hace referencia al ID indicado arriba con: array('id'=>'combo1')
	//
	function mostrar(){
		var opcionSeleccionada = $('#tagName');			// el <option> seleccionado
		var tagName = opcionSeleccionada.val();	// el "value" de ese <option> seleccionado
		
		if(tagName == 0) {
			$('#siguiente').hide('slow');
			return;
		}
		
		var action = "index.php?r=dashboard/GetGraphsNames&tagName="+tagName;

		// se pide al action la lista de graphtags de la categoria seleccionada
		//
		$('#reportarerror').html("");
		$.getJSON(action, function(listaJson) {
			//
			// el action devuelve los graphtags en su forma JSON, el iterador "$.each" los separará.
			//
			
			// limpiar el combo graphtags
			$('#graphs').find('option').each(function(){ $(this).remove(); });
			
			$.each(listaJson, function(key, graphConfiguration) {
				//
				// "graphtag" es un objeto JSON que representa al modelo Producto
				// por tanto una llamada a: alert(graphtag.nombre) dira: "camisas"
				$('#graphs').append("<option value='"+graphConfiguration.id+"'>"
					+graphConfiguration.name+"</option>");
			});
				
			//$('#seleccion').html("Ok, ahora selecciona un graphtag:");
			$('#siguiente').show('slow');
		}).error(function(e){ $('#reportarerror').html(e.responseText); });		
	}
	
	// para que cuando le des click muestre la seleccion
	//
	$('#botonseleccion').click(function(){
		alert("idgraphtag es: "+$('#graphs').val());
	});
	function showGraph(){
		var opcionSeleccionada = $('#graphs');			// el <option> seleccionado
		var graphId = opcionSeleccionada.val();	// el "value" de ese <option> seleccionado
		
		if(graphId == 0) {
			$('#graph').hide('slow');
			return;
		}
		else
		{
			$('#graph').show('slow');
		}
		
		var action = "index.php?r=dashboard/ShowGraph&graphId="+graphId;

		// se pide al action la lista de graphtags de la categoria seleccionada
		//
		$('#reportarerror').html("");
		$.getJSON(action, function(listaJson) {
		
			/*$('#graphs').find('option').each(function(){ $(this).remove(); });
			
			$.each(listaJson, function(key, graphConfiguration) {
				
				$('#graphs').append("<option value='"+graphConfiguration.id+"'>"
					+graphConfiguration.name+"</option>");
			});*/
				
			//$('#seleccion').html("Ok, ahora selecciona un graphtag:");
			$('#graph').show('slow');
		}).error(function(e){ $('#reportarerror').html(e.responseText); 
		});		
	}
</script>
<p id='reportarerror' style='color: red;'></p>
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'dashboard-view'
)); ?>

<p><span>Select Tag:</span>
<?php 
	echo CHtml::dropDownList('tagName','',CHtml::listData($Tag,'tagName','tagName')
		,array('tagName'=>'tag','onchange'=>'mostrar(this);')
	);
?></p>
<?php /*$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'graphtag-configuration-grid',
	'dataProvider'=>$dataProviderGraphTag,
	)); */?>
<p>Please select Graphic</p>
<div id='siguiente' style='display: none;'>
<p id='seleccion'></p>
<p>
<?php 
	echo CHtml::dropDownList(
		 'graphs',""
		,array()
		,array('id'=>'graphs','size'=>'5','onchange'=>'showGraph(this);')
	);
?></p>


</div>
<div id='graph' style='display: none;'>
<p id='seleccion2'></p>
<p>
<?php 
	echo"<iframe src='charts.html' width='780px' height='405px' />
</iframe>";
?></p>


</div>

<?php $this->endWidget(); ?>




